<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui 调试预览</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary   layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn  layui-btn-xs " lay-event="modify">编辑</a>
    <a class="layui-btn  layui-btn-danger   layui-btn-xs" lay-event="delete">删除</a>

</script>


<div style="display: none" id="detailDemo">
    <div class="layui-form-item">
        <label class="layui-form-label">文章名</label>
        <label class="layui-form-label" id="title" style="width: auto">文章名</label>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <label class="layui-form-label" id="created" style="width: auto">文章名</label>

    </div>

</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>


<div style="display: none" id="modifyDemo">

    <form class="layui-form" action="" lay-filter="modifyDemo">


        <input type="hidden" id="title_ID" name="id"/>

        <div class="layui-form-item">
            <label class="layui-form-label">文章名</label>
            <div class="layui-input-block">
                <input type="text" id="title_modify" name="title" required lay-verify="required" placeholder="请输入标题"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <input type="text" name="categories" id="categories_modify" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="text" name="created" id="created_modify" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required" id="city_modify">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="modifyForm">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


</div>

<div class="layui-tab layui-tab-brief" lay-filter="demo">
    <ul class="layui-tab-title">
        <li class="layui-this">演示说明</li>
        <li>日期</li>
        <li>分页</li>
        <li>上传</li>
        <li>滑块</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
                    <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
                    <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
                    <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
                    <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="laydateDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="pageDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-upload-drag" id="uploadDemo">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 100%">
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 50px 20px;"></div>
        </div>


    </div>
</div>

<blockquote class="layui-elem-quote layui-hide layui-text" id="footer">当前版本：layui v{{ layui.v }}</blockquote>


<script src="../static/layui/layui.js"></script>
<script>
    layui.config({
        version: '1619028572570' //为了更新 js 缓存，可忽略
    });

    //加载模块
    layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件
        var layer = layui.layer //弹层
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , dropdown = layui.dropdown //下拉菜单
            , $ = layui.jquery
        var index;
        //向世界问个好
        layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });


        //执行一个laydate实例
        laydate.render({
            elem: '#created_modify' //指定元素
        });

        //Demo

        var form = layui.form;

        //监听提交
        form.on('submit(modifyForm)', function (data) {
            //   console.log(JSON.stringify(data.field))
            var created = data.field.created;
            created = new Date(created);
            // console.log(created);
            data.field.created = created;
            //console.log(JSON.stringify(data.field))
            $.ajax({
                url: "/updateArticle",
                data: data.field,
                type: "post",
                success: function (d) {
                    console.log(d.data)
                    if (d.data > 0) {
                        layer.close(index);

                    }
                    table.reload('demo');
                }
            })
            // layer.msg(JSON.stringify(data.field));
            return false;
        });


        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: '/getList' //数据接口
            , page: true
            , limit: 5
            , limits: [5, 10, 15, 20]
            , title: '文章列表'
            // ,toolbar: '#toolbarDemo'
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols:
                [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'id', title: 'ID', sort: true, fixed: 'left', totalRowText: '合计：', totalRow: true}
                        , {field: 'title', title: '文章名'}
                        , {
                        field: 'created',
                        title: '创建时间',
                        templet: "<div>{{layui.util.toDateString(d.created, 'yyyy-MM-dd HH:mm:ss')}}</div>",
                        sort: true
                    }
                        , {field: 'categories', title: '分类', sort: true}
                        , {field: 'tags', title: '标签'}
                        , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}

                    ]
                ]
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                //Ajax获取
                $.post('/getAticleByid/' + data.id, {}, function (str) {
                    layer.open({
                        type: 1,
                        title: '文章详情',
                        area: ['500px', '300px'],
                        offset: 'l',
                        anim: 5,
                        resize: false,
                        content: $('#detailDemo'),
                        success: function () {

                        }
                    });

                    $("#title").text(str.data.title)
                    $("#created").text(str.data.created)
                });

                //detail(data);
            } else if (layEvent === 'modify') {

                //Ajax获取
                $.post('/getAticleByid/' + data.id, {}, function (d) {
                    index = layer.open({
                        type: 1,
                        title: '文章修改',
                        area: ['700px', '500px'],
                        anim: 5,
                        content: $('#modifyDemo')
                    });

                    form.val("modifyDemo", data);
                    // $("#title_ID").val(d.data.id)
                    // $("#title_modify").val(d.data.title)
                    // $("#categories_modify").val(d.data.categories)
                    var created = layui.util.toDateString(d.data.created, 'yyyy-MM-dd');
                    $('#created_modify').val(created)
                    // $('#city_modify').val(d.data.city)
                    form.render('select'); //更新全部 你的有些表单元素可能是动态插入的。

                });
            }
        });


        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        console.log(JSON.stringify(checkStatus.data[0].id))
                        // layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var arr = new Array();
                        // console.log(JSON.stringify(checkStatus.data))
                        // layer.msg('删除');
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            arr.push(checkStatus.data[i].id);

                        }
                       $.ajax({
                           url:'/deleteAByids'
                           ,data:{"ids":arr}
                           ,traditional:true  //如果向后台传输数组或者list的对象的时候要做深度序列化
                           ,success:function (d) {
                               if(d.data>0)
                               {
                                   table.reload('demo')
                               }

                           }

                       })
                    }
                    break;
            }
            ;
        });


        function detail(data) {
            layer.msg('查看操作' + data.id);

            $.ajax({
                url: "/getDetailbyId/" + data.id,
                type: "get",
                dataType: "json",
                success: function (d) {
                    console.log(d.data);
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '240px'], //宽高
                        content: d.data.title
                    });
                }
            })
        }


    })

</script>
</body>
</html>